<template>
  <div class='treeview row'>
    <ul :class="['col-' + col]" v-for="root in treenodes" role='tree'>
      <li class='parent open' role='treeitem'>
        <span class="treeitem" title='展开/折叠' @click.stop="toggle">
          <i :class='root.icon'></i> {{root.name}}
        </span>
        <em class="text-link font-xs pointer" @click="checkall">全选/反选</em>
        <children v-if="root.children.length" :parent="root" :checked="checked"></children>
      </li>
    </ul>
  </div>
</template>
<!--
  树形视图, 目前用于角色的权限展示 (是否还有其它用途?)
-->
<script>

  function toggle (e) {
    e.target.parentNode.classList.toggle('open')
  }

  function checkall (e) {
    e.target.parentNode.querySelectorAll('[name=treeview-item]').forEach(e => {
      e.checked = !e.checked
    })
  }

  export default {
    name: 'treeview',
    props: {
      treenodes: Array,
      checked: {
        type: Array,
        default: () => []
      },
      col: {
        type: Number,
        default: 4
      }
    },
    methods: {toggle, checkall},
    components: {
      children: {
        name: 'children',
        props: ['parent', 'checked'],
        template: `<ul class='group' role="group">
                    <li v-if="child.children.length" class="parent open" v-for="child in parent.children">
                      <span class="treeitem" title='展开/折叠' @click.stop="toggle"><i :class='child.icon'></i> {{child.name}}</span>
                      <children v-if="child.children.length" :parent="child" :checked="checked"></children>
                    </li>
                    <li v-else>
                      <span class="treeitem">
                        <label class="md-checkbox">
                          <input type="checkbox" name="treeview-item" :value="child.id" :checked="checked.includes(child.id)">
                          <i class="bg-primary"></i>
                          <em :class='child.icon'></em>
                          {{child.name}}
                        </label>
                      </span>
                    </li>
                   </ul>`,
        methods: {toggle}
      }
    }
  }
</script>

<style>
  .treeview ul { list-style-type: none }
  .treeview ul[role=tree] { min-width: 15rem }
  .treeview ul ul { padding-left: 34px; padding-top: 10px }
  .treeview ul ul li:hover { background: rgba(0, 0, 0, .015) }
  .treeview li { padding: 5px; position: relative }
  .treeview li::after, .treeview li::before { content: ''; position: absolute; left: -16px }
  .treeview > ul > li::after, .treeview > ul > li::before { border: 0 }
  .treeview li::before { border-left: 1px solid #ccc; height: 100%; bottom: 50px; top: -10px; width: 1px }
  .treeview li::after { border-top: 1px solid #ccc; height: 20px; top: 20px; width: 22px }
  .treeview li:last-child::before { height: 30px }
  .treeview li::before, .treeview li::after, .treeview li span {
    -webkit-transition: color, border-color, background-color, .25s ease;
    transition: color, border-color, background-color, .25s ease;
  }
  .treeview li span { display: inline-block; align-items: center; white-space: nowrap; border: 1px dotted #999; border-radius: 3px; padding: 3px 8px; cursor: pointer }
  .treeview li span > i, .treeview li span em { min-width: 18px; text-align: center }
  .treeview li.parent > ul { display: none }
  .treeview li.parent.open > ul { display: block }
  .treeview li.parent > .treeitem::before { font-family: FontAwesome; content: '\F055'; display: inline-block; text-align: center; padding: 0 7px 0 3px }
  .treeview li.parent.open > .treeitem::before { content: '\f056' }
  .treeview .treeitem:hover,
  .treeview .treeitem:hover ~ ul li span { background: #eee; border-color: #94A0B4; color: #222 }
  .treeview .treeitem:hover { background-color: #DF8505; border-color: #C67605; color: #fff }
  .treeview .treeitem:hover ~ ul li::before,
  .treeview .treeitem:hover ~ ul li::after { border-color: #F89406 }
  .treeview .treeitem:hover ~ ul li span { background: #FDDFB3; border-color: #FAA937; color: #222 }
</style>